<div class="main-container">
    <div class="search-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
                <nz-form-label>闸门名称</nz-form-label>
                <nz-form-control>
                    <input formControlName="gateName" nz-input placeholder="闸门名称"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>操作人</nz-form-label>
                <nz-form-control>
                    <input formControlName="operator" nz-input placeholder="操作人"/>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>执行起止日期</nz-form-label>
                <nz-form-control>
                    <nz-range-picker formControlName="rangePickerTime" [nzPlaceHolder]="['起始日期', '截止日期']"></nz-range-picker>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo(true)"><i nz-icon nzType="search"></i>查询</button>
<!--                    <button nz-button nzType="primary" (click)="openEditModal()" style="margin-left: 10px">添加开关闸记录</button>-->
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>

    <div class="main-wrap">
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="tableData"
                  [nzTotal]="total"
                  [nzFrontPagination]="false"
                  [(nzPageIndex)]="pageNum"
                  [(nzPageSize)]="pageSize"
                  [nzLoading]="loading"
                  (nzPageIndexChange)="queryInfo()"
                  nzBordered
                  nzSize="middle">
            <thead>
            <tr>
                <th rowspan="2">闸门名称</th>
                <th rowspan="2">开关闸方式</th>
                <th colspan="3">控制方式</th>
                <th rowspan="2">操作人</th>
                <th rowspan="2">操作时间</th>
                <th rowspan="2">执行结果</th>
            </tr>
            <tr>
                <th>开度</th>
                <th>流量</th>
                <th>水位</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of dataTable.data">
                <td>{{data.watergateCode}}</td>
                <td>{{data.modelName}}</td>
                <td>{{data.height}}</td>
                <td>{{data.flow}}</td>
                <td>{{data.level}}</td>
                <td>{{data.name}}</td>
                <td>{{data.uptime}}</td>
                <td>{{data.success === '1' ? '成功' : '失败'}}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>
    <nz-modal nzClassName="custom-modal" nzWidth="760" [(nzVisible)]="modalShow"
              [nzTitle]="modalTitle"
              (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
        <form nz-form [formGroup]="form">
            <div nz-row [nzGutter]="24">
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">闸门名称</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-select formControlName="objid"
                                       nzPlaceHolder="闸门名称">
                                <nz-option *ngFor="let item of gateList"
                                           [nzLabel]="item.watergateCode"
                                           [nzValue]="item.id">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">流量（m³/s）</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="flow" placeholder="流量">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">水位（m）</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="waterLevel" placeholder="水位">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">开度（mm）</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="degreee" placeholder="开度">
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">操作人</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <input nz-input formControlName="operator" placeholder="操作人">
                        </nz-form-control>
                    </nz-form-item>
                </div>

                <div nz-col [nzSpan]="12">
                    <nz-form-item nzFlex>
                        <nz-form-label [nzSpan]="6">操作时间</nz-form-label>
                        <nz-form-control [nzSpan]="16">
                            <nz-date-picker formControlName="operateTime"
                                            nzShowTime
                                            nzFormat="yyyy-MM-dd HH:mm:ss"
                                            nzPlaceHolder="操作时间"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </form>
    </nz-modal>

</div>
